<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>jsx小练习</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用户解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="test"></div>

		<script type="text/babel" >
			/* 
				一定注意区分：【js语句(js代码)】与 【js表达式】
							1.表达式：一个表达式会产生一个值，可以放在需要一个值的地方，表达式是一种特殊的语句（代码）
										下面这些都是表达式：
													(1). a
													(2). a+b
													(3). demo()
													(4). arr.map()	
													....

							2.语句（代码）：
													(1). if(){}
													(2). for(){}
													(3). switch(){case:xxx}
													.....
			*/

			//模拟一些数据
			const arr = ['Angular','React','Vue']
			// const arr = [<li>Angular</li>,<li>React</li>,<li>Vue</li>]

			//1.创建虚拟DOM
			const VDOM = (
				<div>
					<h2>前端框架列表</h2>
					<ul>
						{
							arr.map((item,index)=>{
								return <li key={index}>{item}</li>
							})
						}
					</ul>
				</div>
			)
			//渲染
			ReactDOM.render(VDOM,document.getElementById('test'))
		</script>
	</body>
</html>